<template>
  <div>
    <!--头部导航栏-->
    <navbar/>
    <carousel :list="imgList"/>
    <recommend :list="recommend"/>
    <hot-sale :list="hotSale"/>
    <daily :list="daily"/>
    <index-footer/>
  </div>

</template>

<script>
  import Navbar from '@/public/components/HeaderNavbar'
  import Footer from '@/public/components/Footer'
  import Carousel from './components/Carousel'
  import Recommend from './components/Recommend'
  import HotSale from './components/HotSale'
  import Daily from './components/Daily'
  import axios from 'axios'
  export default {
    name: "Index",
    data () {
      return {
        imgList: [],
        recommend: [],
        hotSale: [],
        daily: []
      }
    },
    methods: {
      getIndexInfo () {
        axios.get('/api/index.json')
          .then(this.getIndexInfoSucc)
          .catch(err=>{
            console.log(error)
          })
      },
      getIndexInfoSucc (res) {
        let data = res.data.data
        this.imgList = data.imgList
        this.recommend = data.recommend
        this.hotSale = data.hotSale
        this.daily = data.daily
      }
    },
    mounted () {
      this.getIndexInfo();
    },
    components: {
      Navbar,
      Carousel,
      Recommend,
      HotSale,
      Daily,
      IndexFooter: Footer
    }
  }
</script>

<style lang="stylus" scoped>
</style>
